
/* fade-transform */
.fade-transform-leave-active, .fade-transform-enter-active {
    transition: all 0.5s;
}

.fade-transform-enter {
    opacity: 0;
    transform: translateX(-30px);
}

.fade-transform-leave-to {
    opacity: 0;
    transform: translateX(30px);
}

.fade-enter-active, .fade-leave-active {
    transition: opacity 0.3s;
}

.fade-enter, .fade-leave-to {
    opacity: 0;
}

.draw-enter-active, .draw-leave-active {
    transition: all 0.5s;
}

.draw-enter, .draw-leave-to {
    height: 0;
}

.slide-enter-active, .slide-leave-active {
    transition: all 3s;
}

// .slide-leave-active {
// transition: all 0.1s linear;
// }
.slide-enter {
    transform: translateY(-5%);
    opacity: 0;
}

.slide-leave-to {
    transform: translateY(0);
    opacity: 0;
}

@keyframes turn {
    0% {
        -webkit-transform: rotate(0deg);
    }

    25% {
        -webkit-transform: rotate(90deg);
    }

    50% {
        -webkit-transform: rotate(180deg);
    }

    75% {
        -webkit-transform: rotate(270deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}
